<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html >
<html>
<head>
<title>查看网点区域</title>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=iHmf7QZXEuB0Bxy1MVwEMvcM"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script type="text/javascript">

//定义地图, 
var map = new BMap.Map("myMap"); // 创建Map实例
var centerPoint = new BMap.Point(121.485966, 31.239957); //初始化地图，中心点为上海中心点
map.centerAndZoom(centerPoint, 13); // 初始化地图,设置中心点坐标和地图级别
var opts = {             //设置左上角控件，地图缩放类型
	type : BMAP_NAVIGATION_CONTROL_SMALL
};
map.addControl(new BMap.NavigationControl(opts)); //添加左上角缩放控件 
map.enableScrollWheelZoom(); //可滚动缩放
map.disableDoubleClickZoom(); //关闭双击放大

$(function(){
	
	var location = <%=request.getAttribute("listLocation")%>;
	var pointsArr = new Array();
	var point;
	for(var i=0;i<location.length;i++){   //循环每一个网点
		var lng = location[i].addressLng;
		var lat = location[i].addressLat;
		point = new BMap.Point(lng, lat);
		pointsArr.push(point);
		var opts = {
				  position : point,// 指定文本标注所在的地理位置
				  offset:new BMap.Size(10,-10)
				};
		if(i%5==0){
			var date=new Date(location[i].createTime);

			var marker = new BMap.Marker(point);  // 创建标注
			map.addOverlay(marker);              // 将标注添加到地图中

			var label = new BMap.Label("("+i/5+")--"+date.getHours()+":"+date.getMinutes(), opts);

			label.setStyle({
				 color : "black",
				 fontSize : "12px",
				 width:"50px",
				 height : "15px",
				 lineHeight : "10px",
				 fontFamily:"微软雅黑",
				 textAlign:"center",
				 background:"rgba(0,0,0,0.0)",
				 border:"0px",
				 
			 });
			marker.setLabel(label);
/* 
			map.addOverlay(label); */
		}
		if(i==0){
			var label = new BMap.Label("起点", opts);
			label.setStyle({
				 color : "green",
				 fontSize : "12px",
				 width:"25px",
				 height : "15px",
				 lineHeight : "10px",
				 fontFamily:"微软雅黑",
				 textAlign:"center",
				 border:"1px solid #ff6a00"
			 });
			map.addOverlay(label);
		}else if(i==location.length-1){
			var label = new BMap.Label("终点", opts);
			label.setStyle({
				 color : "red",
				 fontSize : "12px",
				 width:"25px",
				 height : "15px",
				 lineHeight : "10px",
				 fontFamily:"微软雅黑",
				 textAlign:"center",
				 border:"1px solid #ff6a00"
			 });
			map.addOverlay(label);
		}

	}

	var polyline = new BMap.Polyline(pointsArr, {
			strokeColor : "blue",
			strokeWeight : 3,
			strokeOpacity : 1
		}); //创建折线
		map.addOverlay(polyline); //增加折线
	});
</script>
</head>
<body>
<div id="JScharts_div"></div>

	<div id="outside_div">
		
		<form id="month_search" onsubmit="return navTabSearch(this);" action="courierMapAction.action?toResult=courierMoveLine&rightId=${rightId}" method="post">
			<div class="pageHeader">
				<input type="hidden" name="init" value=0>
				<input type="hidden" name="supportID" value="${courierId}">
				<div class="searchBar">
					<table class="searchContent">
						<tr>
						<td>时间: 
								 <input id="searchCompany_startTime" type="text" class="date" name="selectTime" value="${selectTime}"
									readonly="readonly" />
						</td>

						<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
						<td>
								<div class="buttonActive">
									<div class="buttonContent">
										<button type="submit" >查询</button>
									</div>
								</div>
						</td>
					</tr>
			
				</table>
			</div>
		</div>
	</form>

		<div class="pageContent">			
				<div class="panelBar">
					<ul class="toolBar">

					</ul>
				</div>
		</div>		
			<div class="pageFormContent" layoutH="86">
						
						<!--<div id="load_address" style="width:900px;height:30px;color:black;background:#77787b">
						Loading .....
						<br>
						查询地址中，请稍后！
						</div> -->
						<div id="myMap" style="width: 900px; height: 550px;">
									
						</div>
						
					
			</div>	
		</div>
</body>
</html>
